{% extends 'base.html' %}
{% block title %}
    博客详情页
{% endblock %}
{% block main %}
    <main class="container rounded bg-white p-3">

        <h3>{{ blog.title }}</h3>

        <div class="text-body-tertiary">
        <span>
            <img src="{% static 'img/1.jpg' %}" height="30" width="30" class="rounded-circle">

        </span>
            <span>{{ request.user.username }}</span>
            <span>于</span>

            <span>{{ blog.created_at|date:'Y-m-d h:i' }}</span>发布

        </div>
        <hr>

        <div>
            {{ blog.content|safe }}
        </div>

        <hr>
        <div class="comment">评论（{{ blog.blog_comments.all|length }}）</div>
        <form method="post" action="{% url 'blog:pub_comment' %}">
            {% csrf_token %}
            <input type="hidden" name="blog_id" value="{{ blog.id }}">
            <div class="mt-2">
                <input class="form-control" type="text" name='content' placeholder="请输入评论"
                       aria-label="default input example">

            </div>
            <div class="mt-2 d-flex justify-content-end">
                <button type="submit" class="btn btn-primary" name="comment">评论</button>
            </div>
            {% for comment in blog.blog_comments.all %}
                <div class="mt-2">
                <ul class="list-group list-group-flush">
                <li class="list-group-item text-body-tertiary d-flex justify-content-sm-between">
                <span>
                    <img src="{% static 'img/1.jpg' %}" height="30" width="30" class="rounded-circle">
                    {{ comment.author.username }}
                </span>

                    <span class="create_time" style="line-height: 30px;">
                    {{ comment.created_at|date:'Y-m-d h:i' }}
                </span>
                </li>

                <li class="list-group-item">
                    {{ comment.content }}
                </li>
            {% endfor %}

            </ul>
            </div>
        </form>
    </main>
{% endblock %}
